<template>
    <div>
        <div v-show="item.meta.menu" class="menu">
            <div class="menu-left">
                <img v-show="item.meta.icon" :src="iconName(item.meta.icon)" width="14px" height="14px" alt="图片">
                <span class="menu-left-title">{{item.meta.title}}</span>
            </div>
            <img v-show="item.children&&item.children.length" :src="item.meta.arrow ? arrowDown : arrowUp" width="14px"
                 height="14px" alt="图片">
        </div>
    </div>
</template>

<script>
    import arrowDown from '@img/icon-arrow-down.png';
    import arrowUp from '@img/icon-arrow-up.png';
    import folder from '@img/icon-folder.png';
    import routers from '../../../router/routers'

    export default {
        name: "sideMenuItem",
        props: {
            item: {
                meta: {
                    arrow: true,
                    title: '未知'
                },
                name:''
            }
        },
        data() {
            return {
                arrow: true,
                arrowDown: arrowDown,
                arrowUp: arrowUp,
                routers: routers,

                folder: folder
            }
        },
        methods: {
            iconName(icon) {
                if (!icon) return;

                let iconImg = this.folder;
                switch (icon) {
                    case 'folder':
                        break;
                    default:
                        iconImg = this.folder;
                        break
                }
                return folder
            },
        }
    }
</script>


<style scoped>
    .menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 0;
    }

    .menu:hover {
        cursor: pointer;
    }

    .menu-left {
        display: flex;
        align-items: center;
    }

    .menu-left-title {
        padding-left: 10px;
    }
</style>